import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:flutter_lottie/flutter_lottie.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'package:www.znpigai.teacher/global_store/state.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(
    PracticeEditState state, Dispatch dispatch, ViewService viewService) {
  List<DropdownMenuItem> typeItemList() {
    final List<DropdownMenuItem> items = List();
    GlobalState.articleTypes.forEach((key, value) {
      items.add(DropdownMenuItem(value: key, child: Text(value)));
    });
    return items;
  }

  List<DropdownMenuItem> gradeItemList() {
    final List<DropdownMenuItem> items = List();
    GlobalState.grades.forEach((key, value) {
      items.add(DropdownMenuItem(value: key, child: Text(value)));
    });
    items.removeRange(0, 2);
    return items;
  }

  var border = OutlineInputBorder(
    borderSide: BorderSide(
      color: Colors.white,
    ),
  );

  LottieController lottieController;
  void onViewCreated(LottieController controller) {
    lottieController = controller;

    // Listen for when the playback completes
    lottieController.onPlayFinished.listen((bool animationFinished) {
      print("Playback complete. Was Animation Finished? " +
          animationFinished.toString());
    });
  }

  List<Widget> preview() {
    var children = <Widget>[];

    if (state.photos != null &&
        state.currentOcrIndex >= 0 &&
        state.currentOcrIndex < state.photos.length) {
      children.add(Opacity(
          opacity: 0.9,
          child: Container(
            color: Colors.black87,
          )));
      children.add(Center(
          child: AssetThumb(
        asset: state.photos[state.currentOcrIndex],
        width: MediaQuery.of(viewService.context).size.width.toInt(),
        height: (MediaQuery.of(viewService.context).size.width / 3 * 4).toInt(),
      )));
      children.add(
        Center(
            child: LottieView.fromFile(
          filePath: "assets/lotties/camera_scanning.json",
          autoPlay: true,
          loop: true,
          reverse: true,
          onViewCreated: onViewCreated,
        )),
      );
    }
    return children;
  }

  return Scaffold(
    appBar: new AppBar(
        centerTitle: true,
        elevation: 2.0,
        title: new Text(
          "编辑",
          style: TextStyle(color: Colors.black54, fontSize: 18),
        )),
    body: SafeArea(
        child: Stack(
      children: <Widget>[
        Column(
          children: <Widget>[
            Expanded(
                child: Stack(
              children: <Widget>[
                SingleChildScrollView(
                    child: Container(
                        margin: EdgeInsets.all(10),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Row(
                              mainAxisSize: MainAxisSize.max,
                              children: <Widget>[
                                Expanded(
                                  flex: 1,
                                  child: Card(
                                      child: Padding(
                                          padding: EdgeInsets.only(left: 10),
                                          child: DropdownButton(
                                            isExpanded: true,
                                            underline: Text(''),
                                            hint: Text('文体类型'),
                                            value: state.typeValue,
                                            items: typeItemList(),
                                            onChanged: (item) {
                                              dispatch(PracticeEditActionCreator
                                                  .selectType(item));
                                            },
                                          ))),
                                ),
                                SizedBox(width: 10),
                                Expanded(
                                  flex: 1,
                                  child: Card(
                                      child: Padding(
                                          padding: EdgeInsets.only(left: 10),
                                          child: DropdownButton(
                                            isExpanded: true,
                                            underline: Text(''),
                                            hint: Text('年级'),
                                            value: state.gradeValue,
                                            items: gradeItemList(),
                                            onChanged: (item) {
                                              dispatch(PracticeEditActionCreator
                                                  .selectGrade(item));
                                            },
                                          ))),
                                ),
                              ],
                            ),
                            Card(
                                child: TextField(
                              maxLines: 1,
                              controller: state.titleEditController,
                              focusNode: state.focusNodeTitle,
                              decoration: InputDecoration(
                                contentPadding: EdgeInsets.all(12),
                                hintText: '请输入作文标题',
                                enabledBorder: border,
                                focusedBorder: border,
                              ),
                              onChanged: (input) {},
                            )),
                            Card(
                                child: TextField(
                              maxLines: null,
                              minLines: 16,
                              controller: state.contentEditController,
                              focusNode: state.focusNodeContent,
                              decoration: InputDecoration(
                                contentPadding: EdgeInsets.all(8),
                                hintText: '请输入作文内容',
                                enabledBorder: border,
                                focusedBorder: border,
                              ),
                              onChanged: (input) {},
                            )),
                            SizedBox(height: 10),
                          ],
                        ))),
                Offstage(
                    offstage: !state.isLoading,
                    child: Container(
                      child: Center(
                        child: SpinKitFadingCircle(
                          color: Colors.blue,
                          size: 50,
                        ),
                      ),
                    )),
              ],
            )),
            Container(
                padding: EdgeInsets.all(10),
                child: Row(children: <Widget>[
                  Spacer(),
                  FlatButton(
                    textColor: Colors.white,
                    padding: const EdgeInsets.all(0.0),
                    child: Container(
                      decoration: const BoxDecoration(
                          gradient: LinearGradient(
                            colors: <Color>[
                              Colors.blue,
                              Colors.blue,
                            ],
                          ),
                          borderRadius:
                              BorderRadius.all(Radius.circular(80.0))),
                      padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
                      child: const Text('确认提交',
                          style: TextStyle(color: Colors.white)),
                    ),
                    onPressed: () =>
                        dispatch(PracticeEditActionCreator.onSubmit()),
                  ),
                  Spacer(),
                ])),
          ],
        ),
        Stack(children: preview()),
      ],
    )),
  );
}
